<template>
  <div class="Analysis">
    <div class="page-body" id="page-body" :style="{marginTop:offesTop}">
      <div class="top-view">
        <div class="copyTitle">请复制原文链接</div>
        <div class="notice-view">目前仅支持：微信公众号、今日头条、腾讯新闻、凤凰网、企鹅号、AW大师分享内容（部分文章存在解析失败现象，敬请谅解），如有侵权行为，发布人将承担相关责任</div>
        <!-- <textarea class="linker-input" :placeholder="defaultText" v-model="linkerText"></textarea> -->
        <div class="linker-input">
          <textarea
            class="linker-input-body"
            :placeholder="defaultText"
            v-model="linkerText"
            @focus="getFocus"
            @blur="getBlur"
          ></textarea>
          <i class="iconfont icon-qingkong linker-input-clear" @click="clearLinkerText" v-if="linkerText"></i>
          <!-- <img @click="clearLinkerText" v-if="linkerText" class="linker-input-clear" src=""/> -->
        </div>
        <div class="tips" @click='goAgreement'>点击开始编辑即为同意<b>责任声明及解析文章协议</b></div>
        <div class="start-edit" @click="startEdit" ref="startedit">开始编辑</div>
        <div class="clear-address" @click="editRecord">编辑记录</div>
        <div class="line_10"></div>
      </div>
      <!-- <div class="add-article" @click="addArticle">添加文章</div> -->
      <!-- 热门文章换一换 -->
      <!-- <div class="hot-article">
        <div class="hot-article_header scale-1px-hairline--header">
          <span class="hot-article_title">热门文章</span>
          <span class="hot-article_more" @click="goArticle">查看更多 <i class="iconfont icon-arrow-"></i></span>
        </div>
        <div class="hot-article_list">
          <articleItem v-for="(item,index) in hotArticle" :key="index" :item="item"></articleItem>
        </div>
        <div class="hot-refresh" @click="hotRefresh">
          <span>换一换<i class="iconfont icon-huanyihuan" style="font-size: 14px;"></i></span>
        </div>
      </div> -->
      <div class="guide">
        <h3>如何获取文章链接</h3>
        <p>· 打开准备转载的文章，点击屏幕右上角「···」；在弹出的菜单选择「复制链接」。</p>
        <img src="../../../assets/img/discover/gride-image1.png" />
        <p>· 打开AW公众号，点击「写一写」在写一写首页右下角点击「转载文章」，粘贴链接，即可自动识别文章编辑分享。</p>
        <img src="../../../assets/img/discover/gride-image2.png" />
      </div>
    </div>
    <commDialog :show.sync="showGuide" @closeGuide = "closeGuide">
      <img :src="guideImg" class="guideImg" alt="" ref="guideedit">
    </commDialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import articleItem from 'COMP/Discover/articleItem'
import commDialog from 'COMP/Dialog/commDialog'
import articleService from 'SERVICE/articleService'

export default {
  data: () => ({
    defaultText: '请点击喜欢的微信公众号文章右上角更多进行复制，并粘贴到这里',
    linkerText: '',
    addButtonClick: true,
    editButtonClick: true,
    offesTop: '',
    current: 1,
    hotArticle:[],
    guideImg:require('IMG/guide/guide_edit.png'),
    showGuide:false
  }),
  components:{
    articleItem,
    commDialog
  },
  async created() {
    sessionStorage.removeItem("articleData");
    await this.getArticleList();
    // let cacheData = JSON.parse(sessionStorage.getItem("cacheData"));
    // this.hotArticle = cacheData['10万+'].articleData.splice(0,3);
    // console.log("this.hotArticle",this.hotArticle);
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    linkerText(val){
      if(val){
        let articleCollect = JSON.parse(localStorage.getItem("articleCollect"));
        if(!articleCollect||articleCollect.editGuide != 1){
          this.$refs.guideedit.style.marginTop = (this.$refs.startedit.getBoundingClientRect().top - 7.5) + 'px';
          this.showGuide = true;
          if(articleCollect == null){
            articleCollect = {};
          }
          articleCollect.editGuide = 1;
          localStorage.setItem("articleCollect",JSON.stringify(articleCollect));
        }
      }
    }
  },
  methods: {
    closeGuide(){
      this.showGuide = false;
    },
    hotRefresh() {
      this.current +=1
      this.getArticleList()
    },
    // 获取热门文章列表
    async getArticleList(sortType) {
      let result = await articleService.getArticleList({
        current: this.current,
        size: 3,
        city: '',
        classify: 3,
        sortType: 1
      })
      this.hotArticle = result.records;
    },
    goArticle(){
      this.$router.push({path:'/write-article'});
    },
    //清除输入框内容
    clearLinkerText(){
      this.linkerText = '';
    },
    //编辑记录
    editRecord(){
      this.$router.push({path:'/editRecord'})
    },
    // 跳转规则页面
    goAgreement () {
      this.$router.push('/discover/agreement')
    },
    //开始编辑
    startEdit() {
      // 去掉中文和空格
      // this.linkerText = this.linkerText.replace(/[\u4e00-\u9fa5\s]+/g, '')
      // this.linkerText = match(/http(.*)/)[0]
      let parseText = this.linkerText.match(/http(.*)/)
      if (parseText) {
        this.linkerText = parseText[0].trim()
        if (/zooming-data/.test(this.linkerText)) {
          this.linkerText = this.linkerText.replace(/\?.*#/, "#")
          console.log(this.linkerText)
        }
      }
      if (!this.editButtonClick) {
        return false
      }
      this.editButtonClick == false
      if (!this.linkerText.length) {
        return this.$toast('您尚未填写原文链接')
      }
      let reg = /^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/g
      if (!reg.test(this.linkerText)) {
        return this.$toast('原文链接填写不正确，请检查!')
      }
      // this.linkerText = this.linkerText.replace(/\s+/g, '')
      this.$router.push({ name: 'analysis', query: { url: this.linkerText, parseType: '1' } })
      // if (this.linkerText.length > 0) {
      //   this.linkerText = this.linkerText.replace(/\s+/g, '')
      //   if (this.editButtonClick == true) {
      //     this.$router.push({ name: 'analysis', query: { url: this.linkerText, parseType: '1' } })
      //   }
      // } else {
      //   this.editButtonClick = true
      //   this.$toast('您尚未填写原文链接')
      // }
    },

    //清除输入框地址信息
    clearAddress() {
      this.linkerText = ''
    },

    //获取焦点
    getFocus() {
      // this.offesTop = '20px'
    },

    //失去焦点问题
    getBlur() {
      document.activeElement.scrollIntoViewIfNeeded(true)
    },

    //添加文章
    addArticle() {
      if (this.linkerText.length > 0) {
        if (this.addButtonClick == true) {
          this.$router.push({ name: 'analysis', params: { url: this.linkerText, parseType: '2' } })
        }
      } else {
        this.addButtonClick = true
        this.$toast('您尚未填写原文链接')
      }
    },

    //commitInfo
    async commitInfo(data) {
      this.addButtonClick = false
      const result = await articleService.articleAnalysis(data)
      if (result.returnCode == '31102') {
        this.addButtonClick = true
        this.$dialog
          .alert({
            title: '爬取失败',
            message: '请确认内容是否为微信公众号内容，并检查网络环境后再次尝试',
            confirmButtonText: '我知道了'
          })
          .then(async () => {})
      } else {
        this.addButtonClick = true
        this.$router.push({ name: 'historicalArticles', query: { typeCode: '3' } })
      }
    },
    // 浏览器回退监听
    goBack () {
      this.$router.replace({path:'/dynamics'});
    }  
  },
  mounted() {
    // if (window.history && window.history.pushState) {
    //   history.pushState(null, null, document.URL);
    //   console.log("写一写解析返回首页")
    //   window.addEventListener('popstate', this.goBack, false);
    // }
  },
  destroyed() {
    // window.removeEventListener('popstate', this.goBack,false)
  },
  beforeDestroy() {
    try {
      document.body.removeEventListener('touchmove')
    } catch (error) {}
  }
}
</script>
<style lang="less" scoped>

.scale-1px-hairline--header::after{
  background: #E2E8EE;
}
.Analysis{
  background: #F7F9FA;
  overflow: hidden;
}
.page-body {
  width: 100%;
  min-height: 100%;
  background: #fff;
  // padding: 16px;
  .top-view {
    padding: 16px;
    padding-bottom: 0;
    .line_10{
      height: 10px;
      background: #F7F9FA;
      margin: 0 -16px;
    }
    .hot-article{
      background: #fff;
      .hot-article_header{
        height: 56px;
        margin: 0 -16px;
        padding:  0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >.hot-article_title{
          font-size: 20px;
          color: #13284D;
          font-weight: bold;
        }
        >.hot-article_more{
          font-size: 14px;
          color: #9CA5B5;
        }
      }
      .hot-article_list{
        overflow: hidden;
      }
      .hot-refresh {
        width: 100%;
        height: 44px;
        background: #F2F5F9;
        margin: 16px 0;
        line-height: 44px;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        color: #9CA5B5;
        i {
          padding-left: 4px;
        }
        &:active {
          background: #eee;
        }
      }
    }
    .copyTitle {
      font-size: 20px;
      line-height: 24px;
      color: #13284D;
      font-weight: bolder;
    }

    .notice-view {
      color: #40516F;
      font-size: 12px;
      margin-top: 4px;
      line-height: 18px;
    }

    .linker-input {
      position: relative;
      width: 100%;
      border: #E4E6F0 1px solid;
      margin-top: 8px;
      height: 88px;
      border-radius: 2px;
      .linker-input-clear{
        display: inline-block;
        position: absolute;
        color: #9CA5B5;
        width: 16px;
        height: 16px;
        right: 8px;
        bottom: 8px;
      }
      .linker-input-body {
        color: #13284D;
        font-size: 16px;
        line-height: 20px;
        padding: 10px;
        width: 100%;
        height: 100%;
        border: none;
        &::placeholder{
          font-size: 12px;
          line-height: 20px;
          color: #9CA5B5;
        }
      }
    }

    .clear-address {
      margin-top: 24px;
      margin-bottom: 24px;
      font-size: 16px;
      text-align: center;
      line-height: 18px;
      color: #007AE6;
    }

    .add-article {
      display: none;
      margin-top: 20px;
      width: 90%;
      margin-left: 5%;
      margin-right: 5%;
      background: rgba(242, 248, 254, 1);
      border-radius: 6px;
      font-size: 16px;
      text-align: center;
      line-height: 44px;
      color: #445166;
    }

    .start-edit {
      width: 100%;
      background: rgba(0, 122, 230, 1);
      border-radius: 6px;
      height: 44px;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      line-height: 44px;
    }
    .tips{
      margin: 16px auto 8px;
      color: #969EA8;
      font-size: 12px;
      line-height: 16px;
      b{
        margin-left: 5px;
        color: #445166;
        font-weight: 500;
      }
    }
  }
  .guide {
    padding: 0 16px;
    background: #F7F9FA;
    h3 {
      font-size: 16px;
      padding: 14px 0;
      color: #13284D;
    }
    p {
      font-size: 14px;
      line-height: 20px;
      color: #405170;
    }
    img {
      padding: 16px 0;
    }
  }
}
</style>
